// // 避免不必要的渲染  案例 


// =============================== 使用 shouldComponentUpdate 的方式来进行渲染优化 =============================
// import React from 'react'
// import ReactDOM from 'react-dom'

// // 在这个案例中，生成的随机数很可能前后两次的数值是一样的，当他一样的时候，我们完全不需要在进行重新渲染

// class App extends React.Component{
//     state={
//         number:0
//     }

//     handleClick=()=>{
//         this.setState((state,props)=>{
//             return{
//                 number:Math.floor(Math.random()*3)
//             }   
//         })
//     }

//     // 因为两次渲染的数据是一样的，所以不需要每次都重新渲染数据
//     // shouldComponentUpdate(nextProps,nextState){
//     //      let pre = this.state.number
//     //      let cur = nextState.number
//     //     //  if(pre == cur){
//     //     //     return false
//     //     //  }
//     //     //   return true

//     //     // 进行优化,一行代码解决
//     //     return pre!==cur
//     //     }   

//     render(){
       
//         return (
//             <div>
//                 <NumberBox number={this.state.number}></NumberBox>
//                 <button onClick={this.handleClick}>重新生成 </button>
//             </div>
//         )
//     }
// }

// class NumberBox extends React.Component{
//     shouldComponentUpdate(nextProps){
//         return this.props.number !== nextProps.number
//     }

//     render(){
//         console.log('render');
//         return (
//             <div>
//                 <h1>随机数：{this.props.number}</h1>
//             </div>
//         )
//     }
// }

// ReactDOM.render(<App/>,document.getElementById('root'))



// ======== 使用纯组件的方式进行渲染优化(避免不必要的渲染) ========

// 避免不必要的渲染  案例 

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
    state={
        number:0
    }

    handleClick=()=>{
        this.setState(()=>{
            return{
                number:Math.floor(Math.random()*3)
            }   
        })
    }
    render(){
        return (
            <div>
                <NumberBox number={this.state.number}></NumberBox>
                <button onClick={this.handleClick}>重新生成 </button>
            </div>
        )
    }
}

class NumberBox extends React.PureComponent{
    render(){
        console.log('render');
        return (
            <div>
                <h1>生成随机数：{this.props.number}</h1>
            </div>
        )
    }
}

ReactDOM.render(<App/>,document.getElementById('root'))